---
title: Design System
description: Who needs Storybook anyway?
---

import { H1, H2, Description } from '@/src/components/typography'

<Description>Who needs Storybook anyway? (using the `<Description>` component)</Description>

## Typography

# h1 Heading
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading

Comparison with components:

# H1 in Markdown with `code` block

<H1 id="foo">H1 using the `<H1>` component (with ID)</H1>

<H1>H1 using the `<H1>` component (no ID)</H1>

## H2 in Markdown

<H2 id="bar">H2 using the `<H2>` component (with ID)</H2>

<H2>H2 using the `<H2>` component (no ID)</H2>

## Callouts

From [Fumadocs](https://fumadocs.dev/docs/ui/markdown#callouts), with slight design tweaks.

### Inline callouts

<Callout type="info">Info</Callout>
<Callout type="success">Success</Callout>
<Callout type="warning">Warning</Callout>
<Callout type="error">Error</Callout>

### With title

<Callout title="Title" type="info">Info</Callout>
<Callout title="Title" type="success">Success</Callout>
<Callout title="Title" type="warning">Warning</Callout>
<Callout title="Title" type="error">Error</Callout>

## Code blocks

```ts title="demo.ts"
const hello = 'code blocks'
```

Inline code blocks are supported too: `const foo = 'bar'{:ts}`.

<Callout title="Code blocks in callouts?">
  ```ts
export const yep = "we got'em too."
  ```
</Callout>

## Feature support matrix

<FeatureSupportMatrix introducedInVersion='2.5.0' />
<FeatureSupportMatrix introducedInVersion='2.5.0' support={{ supported: true, frameworks: ['React Router (v6)', 'React Router (v7)', 'Remix']}}/>
<FeatureSupportMatrix introducedInVersion='2.5.0' support={{ supported: true, frameworks: ['Next.js (app router)']}}/>
<FeatureSupportMatrix introducedInVersion='2.5.0' support={{ supported: false, frameworks: ['Next.js (app router)']}}/>
<FeatureSupportMatrix introducedInVersion='2.5.0' deprecatedInVersion='2.6.0' />
<FeatureSupportMatrix introducedInVersion='2.5.0' deprecatedInVersion='2.6.0' support={{ supported: true, frameworks: ['React Router (v6)', 'React Router (v7)', 'Remix']}}/>
<FeatureSupportMatrix introducedInVersion='2.5.0' deprecatedInVersion='2.6.0' support={{ supported: true, frameworks: ['Next.js (app router)']}}/>
<FeatureSupportMatrix introducedInVersion='2.5.0' deprecatedInVersion='2.6.0' support={{ supported: false, frameworks: ['Next.js (app router)']}}/>

